<template>
  <section class="settting-wrapper business-login-wrapper">
    <header class="setting-header">
      <h4 class="title">商家端登录图片设置</h4>
      <span class="detail">请为您的商家端登录界面上传图片</span>
    </header>

    <div class="setting-body" :data-pic-name="logoObj.merchantLoginImg">
      <div class="big-img-box">
        <img src="../../../assets/img/wechat_login.jpg" alt="" class="big-img">
        <div class="blue-dashed-border"></div>
      </div>
      <div class="upload-box">
        <div class="uploaded-img-box">
          <i class="marking marking-top">690px</i>
          <i class="marking marking-right">660px</i>
          <el-upload
            v-show="fileList.length > 0"
            class="picture-card-box"
            :class="{'is-uploaded': fileList.length > 0}"
            action=""
            list-type="picture-card"
            :limit="2"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :auto-upload="false">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="picture-card-box" v-show="fileList.length === 0">
            <img :src="originFileUrl" alt="">
          </div>
        </div>
        <el-upload
          class="picture-btn-box"
          action=""
          :limit="2"
          list-type="picture"
          :file-list="fileList"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadPic">点击上传</el-button>
          <el-button v-if="originFileUrl" size="small" type="primary" @click="handleRemove">重置</el-button>
          <div slot="tip" class="el-upload__tip">请上传png/jpg文件且不超过200kb</div>
        </el-upload>
      </div>
    </div>
  </section>
</template>

<script>
import defaultPic from '../../../assets/img/wechat_login_bg.png'
import { mapMutations } from 'vuex'
import utils from '../../../mixins/utils.js'
import theme from '../../../mixins/theme.js'
export default {
  name: 'businessLogin',

  mixins: [utils,theme],

  data () {
    return {
      originFileUrl: defaultPic,
      fileList: [],
      merchantLoginImg: ''
    }
  },

  computed: {
    logoObj () {
      let obj = this.$store.state.logoObj
      this.originFileUrl = obj.merchantLoginImg
      return obj
    }
  },

  methods: {
    ...mapMutations({
      setLogoObj: 'setLogoObj'
    }),
    // 删除service上的图片
    handleRemove(file, fileList){
      let self = this
      if(!self.originFileUrl){
        self.fileList = []
        self.merchantLoginImgName = ''
        return
      }
      API.fetchPost('/skin/logo/resetTraderLogo', {})
        .then(data => {
          self.fileList = []
          self.merchantLoginImgName = ''
          self.getLogoObj()
          self.showToast('操作成功！', 1, 1500)
        }, err => {
          console.log(err)
        })
    },
    handleChange (file, fileList) {
      let self = this
      if (fileList.length > 0) {
        this.fileList = [file]

        if (file.raw) {
          let reader = new FileReader()
          reader.readAsDataURL(file.raw)
          reader.onload = function (e) {
            let _res = this.result
            self.merchantLoginImg = _res.split(';base64,')[1]
          }
        }
      } else {
        this.fileList = []
      }
    },

    uploadPic () {
      let self = this
      if(self.fileList.length>0){
        let file = self.fileList[0]
        let params = {
          merchantLoginImgName: file.name,
          merchantLoginImg: self.merchantLoginImg
        }

        API.fetchPost('/skin/logo/save.do', params)
          .then(data => {
            self.getLogoObj()
            self.showToast('操作成功！', 1, 1500)
            self.fileList = []
            self.merchantLoginImgName = ''
          }, err => {
            console.log(err)
          })
      }else{
        self.fileList = []
        self.showToast('请先选择图片!', 2)
      }   
    }
  }
}
</script>

<style lang="less" scoped>
@grey99: #999999;
@lightBorderColor: #d7dce2;
@blueBorder: #5694DB;
.setting-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;

  .title {
    display: inline-block;
    margin-right: 18px;
  }

  .detail {
    color: @grey99;
  }
}

.setting-body {
  display: flex;
}
.big-img-box {
  width: 240px;
  border: 1px solid @lightBorderColor;
  position: relative;

  img {
    width: 100%;
  }

  .blue-dashed-border {
    position: absolute;
    top: 44px;
    left: -1px;
    right: -1px;
    height: 200px;
    border: 2px dashed @blueBorder;

    &::after {
      content: '';
      position: absolute;
      top: 15px;
      right: -84px;
      width: 84px;
      height: 1px;
      border-bottom: 2px dashed @blueBorder;
    }
  }
}

.upload-box {
  margin-left: 84px;
  margin-top: 32px;
}

.uploaded-img-box {
  margin-bottom: 20px;
  position: relative;
}

.marking {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: @grey99;
}

.marking-top {
  top: -22px;
  left: 0;
  right: 0;
  height: 15px;
  border-left: 1px solid @lightBorderColor;
  border-right: 1px solid @lightBorderColor;

  &::before, &::after {
    content: '';
    width: 65px;
    height: 1px;
    background-color: @lightBorderColor;
  }

  &::before {
    margin-right: 10px;
  }
  &::after {
    margin-left: 10px;
  }
}
.marking-right {
  right: -30px;
  top: 0;
  bottom: 0;
  width: 15px;
  flex-direction: column;
  border-top: 1px solid @lightBorderColor;
  border-bottom: 1px solid @lightBorderColor;


  &::before, &::after {
    content: '';
    width: 1px;
    height: 72px;
    background-color: @lightBorderColor;
  }

  &::before {
    margin-bottom: 8px;
  }
  &::after {
    margin-top: 8px;
  }
}
.picture-card-box {
  width: 203px;
  height: 194px;
  border: 1px solid @lightBorderColor;
  border-radius: 4px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
</style>

<style lang="less">
.business-login-wrapper {
  .picture-card-box {
    &.is-uploaded {
      .el-upload {
        display: none;
      }
    }
    &:not(.is-uploaded) {
      .el-upload-list {
        display: none;
      }
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 203px;
    height: 194px;
    margin-bottom: 0;
  }
}

.picture-btn-box {
  .el-upload-list {
    display: none;
  }
}
</style>
